<template>
  <div class="list">
    <el-popover placement="top" width="300" trigger="click">
      <div class="allList">
        <div class="list-sub" v-for="item in listArr" :key="item.id" @click="handle(item)">
          <div class="top">{{ item.title }}</div>
          <div class="bottom">{{ item.content }}</div>
          <div class="shadow" v-show="item.currentClick"></div>
        </div>
      </div>
      <el-button slot="reference">click 激活</el-button>
    </el-popover>
  </div>
</template>
<script>
export default {
  props: {
    listArr: {
      type: Array
    }
  },

  data() {
    return {
      currentId: -1,
      result: []
    };
  },
  watch: {},
  methods: {
    handle(obj) {
      // 判断当前是否被选中
      // 选中就添加到result中
      // 选中状态为false时看result中是否有 有的话删除没有不做操作
      obj.currentClick = !obj.currentClick;
      if (obj.currentClick) {
        this.result.push(obj);
      } else {
        let index = this.result.findIndex(val => val.id === obj.id);
        index === -1 ? '' : this.result.splice(index, 1);
      }
      this.$emit('currentTitle', this.result);
    },
    currentDel(res) {
      console.log(res);
      if (!res) return;
      let index = this.result.findIndex(val => res.id === val.id);
      index === -1 ? '' : this.result.splice(index, 1);
      res.currentClick = false;
    }
  }
};
</script>
<style scoped>
.list-sub {
  padding: 6px;
  background-color: #ccc;
  margin-bottom: 8px;
  position: relative;
}
.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(135, 206, 235, 0.2);
  top: 0;
  left: 0;
}
</style>
